<script setup lang="ts">
import { ref, computed, useAttrs } from 'vue'
import { t } from '@/lang'
import { getCategoryTagApi } from '../../api'
import { cloneDeep } from 'lodash-es'

const emit = defineEmits(['change'])
const props = defineProps({
    is: {
        type: String,
        default: ''
    },
    asyncClose: {
        type: Boolean,
        default: false
    }
})
/** 显示/隐藏 */
const visible = ref<boolean>()
const attrs = useAttrs()
const title = ref('')
const formRef = ref()

const fullscreen = ref(false)

/**
   * @description 弹框属性
   */
const dialogAttrs = computed(() => {
    return {
        width: '600px',
        showClose: true,
        title: title.value,
        appendToBody: true,
        ...attrs
    }
})

/**
   * @description 显示弹框
   */
function show (t: string, value: string[]) {
    visible.value = true
    title.value = t
    selection.value = value
    getCategoryTag()
}

function close () {
    visible.value = false
}

/**
   * @description 关闭弹框
   */
function handleCancel () {
    visible.value = false
}

/**
   * @description 保存
   */
function handleSave () {
    !props.asyncClose && (visible.value = false)
    emit('change', selection.value)
}

const keyword = ref('')
const selection = ref<string[]>([])
const list = ref<IGroupTagItem[]>([])

const selected = computed(() => {
    return (id:string) => selection.value.includes(id)
})

const result = computed(() => {
    if (keyword.value) {
        return cloneDeep(list.value).filter(item => item.tags.some(tag => tag.name.indexOf(keyword.value) !== -1)).map(item => {
            item.tags = item.tags.filter(tag => tag.name.indexOf(keyword.value) !== -1)
            return item
        })
    }

    return list.value
})

async function getCategoryTag () {
    const res = await getCategoryTagApi()
    console.log(res)
    list.value = res.data
}

function handleSelect (item: ITagItem) {
    if (selection.value.includes(item.tag_id)) {
        selection.value.splice(selection.value.indexOf(item.tag_id), 1)
    } else {
        selection.value.push(item.tag_id)
    }
}

function handleClear () {
    selection.value = []
}

defineExpose({
    show,
    close
})
</script>

<template>
  <el-dialog
    draggable
    class="f-dialog"
    v-model="visible"
    v-bind="dialogAttrs"
    :fullscreen="fullscreen"
    @closed="fullscreen = false"
  >
    <template #header>
      <div class="dialog-title">{{ title }}</div>
    </template>
    <el-row>
      <el-input v-model="keyword" placeholder="搜索标签" class="max-w-[280px]" clearable></el-input>
      <!-- <el-button type="primary" class="ml-[10px]" plain @click="handleSearch">搜索</el-button> -->
    </el-row>
    <el-scrollbar class="mt-[15px]" height="50vh">
      <div v-if="result.length" class="list">
        <div class="item" v-for="(item, index) in result" :key="index">
          <div class="item-title">{{item.group_name}}</div>
          <el-space class="pt-[10px] pb-[10px]" v-if="item.tags.length" wrap>
            <el-tag :effect="selected(tag.tag_id) ? 'dark' : 'light'" :type="selected(tag.tag_id)?'primary':'info'" v-for="(tag, i) in item.tags" :key="i" size="small" @click="handleSelect(tag)">{{tag.name}}</el-tag>
          </el-space>
          <el-row v-else class="pt-[10px] pb-[10px] text-[12px] text-[#999]">暂无标签</el-row>
        </div>
      </div>
      <el-empty v-else></el-empty>
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="float-left" type="primary" text @click="handleClear">{{ t('form.clear') }}</el-button>
        <el-button @click="handleCancel">{{ t('form.cancel') }}</el-button>
        <el-button type="primary" @click="handleSave">{{ t('form.confirm') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
  .dialog-opt {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
  }

  .dialog-opt-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 48px;
    cursor: pointer;
  }

  .el-scrollbar {
    min-height: 20vh;
    max-height: 50vh;
  }

  .item-title {
    position: relative;
    line-height: 30px;
    padding-left: 8px;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 12px;
      background: var(--el-color-primary);
      border-radius: 4px;
    }
  }

  .el-tag {
    cursor: pointer;
  }
</style>
